import { Button, Drawer } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import { Routes, Route, Link, useParams } from 'react-router-dom';
import styles from "./problem.module.less"
import { Desc, Submit, Comments, Solution } from "./view"
import { LeftNav } from '../../component/problem/problemLeftNav/leftNav';
import { ProblemRight } from '../../component/problem/problemRight/right';
import { reqSubmitCode } from '../../api';
import { SubmitRes } from "./submitRes"

export const Problem = () => {
    let codeRef = useRef()
    let authorId = useRef("")
    
    let params = useParams()
    let problemId = params.id
    let dataSorce = {}

    const onsubmit = async () => {
        console.log(codeRef.current);
        let { selectvalue, code } = codeRef.current
        if (authorId.current == null) {
            authorId.current = localStorage.getItem("authorId")
        }
        console.log(authorId, problemId, selectvalue, code, "========================");
        // let data = await reqSubmitCode(authorId,problemId,selectvalue,code)
        // let data = await reqSubmitCode(15570357290,problemId,selectvalue,code)
        // console.log(data.data);
        // dataSorce = { verdict, msg, runTime, runMemory, submitTime} = data.data.data    
        
    }



    const [visible, setVisible] = useState(false);
    const showDrawer = () => {
        setVisible(true);
    };
    const onClose = () => {
        setVisible(false);
    };


    return (
        <>
            <div className={styles.container}>
                <div className={styles.leftContainer}>
                    <div >
                        <LeftNav />
                    </div>
                    <div className={styles.showContainer}>
                        <Routes>
                            <Route path="/" element={<Desc {...params} />} />
                            <Route path="submissions" element={<Submit value={problemId} dataSorce={dataSorce} />} />
                            <Route path="comments" element={<Comments value={problemId} />} />
                            <Route path="solution" element={<Solution value={problemId} />} />
                        </Routes>
                    </div>
                </div>
                <div className={styles.middleContainer}></div>

                <div className={styles.rightContainer}>
                    <ProblemRight ref={codeRef} />
                </div>
            </div>
            <div className={styles.bottomNav}>
                <div className={styles.leftNav}>
                    <div >
                        <Button type="primary" onClick={showDrawer}>题目列表</Button>
                    </div>

                    <div className={styles.flexRight}>
                        <Button type="primary" onClick={onsubmit}>随机一题</Button>
                        <Button type="primary" onClick={onsubmit}>上一题</Button>
                        <span >1/2467</span>
                        <Button type="primary" onClick={onsubmit}>下一题</Button>
                    </div>
                    <Drawer title="Basic Drawer" placement="left" onClose={onClose} closable={false} visible={visible}>
                        <p>Some contents...</p>
                        <p>Some contents...</p>
                        <p>Some contents...</p>
                    </Drawer>
                </div>

                <div className={styles.rightNav}>
                    <div>
                        <Button type="link" onClick={onsubmit}>控制台</Button>
                        <Button type="link" onClick={onsubmit}>贡献</Button>
                    </div>

                    <div>
                        <Button type="primary" onClick={onsubmit}>执行代码</Button>
                        <Button type="primary" onClick={onsubmit}>提交</Button>
                    </div>
                    <SubmitRes  />

                </div>


            </div>
        </>

    )
}